De nada adianta saber todos os comandos da linguagem HTML, disponibilizar um conteúdo interessante para o internauta, ter imagens bem feitas se não soubermos (e utilizarmos) regras básicas de Design. O Design é que vai transformar um site "legalzinho" em um importante veículo de comunicação.

Não temos a pretensão de formar um Web Designer aqui, mas apenas dar alguns conceitos básicos que se forem seguidos deixarão sua página com um aspecto mais profissional, com um acabamento mais refinado e fará com que os seus visitantes queiram sempre dar um pulo no seu site. Todos os meses estaremos aqui dando dicas de como fazer seu site melhor...


Hoje em dia, com todos os programas existentes, é muito fácil fazer um site que pode ser um campeão de visitação ou apenas mais um site perdido no cyberespaço aguardando um internauta perdido aparecer por lá...

Vários detalhes fazem a diferença entre sua página ser apenas "mais uma página" ou "aquela" página que até o pessoal da MICROSOFT ficaria de boca aberta ao visitá-la.

Sem sombra de dúvida um dos pontos mais importantes da sua página é o Design.

Entende-se por Design:

1) a disposição de forma ordenada dos elementos gráficos e do texto na página,
2) a formatação de ítens que criam uma identidade visual (logotipos, vinhetas e seções) e
3) a identidade visual em sí, a uniformidade de todos estes elementos no site.
Os sites desenvolvidos por profissionais de criação da Internet (chamados de Webmasters, ou Mestres da Web) utilizam princípios gráficos e visuais para especificar cuidadosamente a posição e as relações dos elementos de cada página, mantendo um controle rigoroso do layout.

Um site desenvolvido tendo um design em mente vai estimular e guiar os visitantes em potencial, proporcionando-lhes uma experiência agradável da primeira à última página.

Você mesmo já deve ter sentido o incômodo que é navegar por sites que não mantém um design estruturado:

Encontrar as informações que você procura é demorado demais,
Existe uma sensação de estar "perdido" ao navegar,
Quando se passa de uma página para outra não se mantém a mesma estrutura das anteriores,
Não existem elementos que o ajudem a saber o que site possui.

Vamos ver alguns conceitos e dicas que, se forem seguidos, podem transformar seu site em um lugar que desperta o desejo de ser visitado.
A primeira e mais importante regra a ser seguida para seu site se diferenciar dos demais é definir um design e segui-lo.
Infelizmente muitos sites não atingem seu objetivo pois se afastam do que foi planejado inicialmente ou mudando o design ao longo das páginas.

Você agora deve estar perguntando:

Qual deve ser o estilo das minhas páginas?
Como organizar a informação em cada página?
Que formato deve ter meu site ?
Para responder estas (e outras) perguntas tenha sempre em mente:

nunca misture designs diferentes num mesmo site.

Com certeza você já sentiu a desagradável sensação de visitar sites que misturam longas páginas de texto corrido com frames e layouts que mudam após um único clique do mouse e o levam a pensar que você esta passando por vários sites diferentes...

Assim que definir o design geral das suas páginas, utilize-o sempre em todas as páginas do seu site. Isto dará ao visitante a sensação de saber sempre onde está e de poder encontrar o que procura. De nada adianta ter a informação mais importante do mundo se o internauta não puder encontrá-la em seu site.
Certamente ele vai buscar em outro lugar o que não acha em seu site...

Existem vários estilos de design que podem ser usados com sucesso em seu site. Você vai perceber que nem sempre o design de um site dará certo em outro. Assim, antes de sair copiando o que você encontrar por ai pense e analise o que vai querer usar nas suas páginas.

Basicamente existem quatro formas (ou padrões) que você deve escolher para desenvolver seu site:


É o layout obtido utilizando apenas comandos HTML


Embora este tipo de design possa resultar numa boa solução em determinadas situações (como por exemplo, páginas que serão impressas pelo usuário) ela tem um grande número de desvantagens na maior parte dos casos, pois normalmente resulta em páginas intermináveis e pouco estruturadas, dificultando a sua manutenção e prejudicando o usuário, na medida em que lhe torna mais difícil encontrar a informação que procura. Imagine como é divertido ler uma página que usa a fonte Arial, corpo 6, que você desce, desce e não tem fim...

O principal problema de usar apenas HTML é que não existe a possibilidade de controlar (de forma precisa) o posicionamento de objetos na página.


Criam um design de forma simples e compatível com todos os browsers


A forma mais simples para controlar o posicionamento dos elementos em uma página é usando o comando TABLE (tabelas). A possibilidade de usar linhas e colunas (formando uma matriz) permite um controle razoável sobre as páginas (mantendo um design elegante e ordenado) e ao mesmo tempo simples, sem a necessidade de conhecer comando mais avançados.

Podemos dizer que o comando TABLE é a primeira etapa para as pessoas que estão se aprofundando em HTML e tentando criar páginas mais profissionais.

A principal vantagem de usar esta opção é que as tabelas são compatíveis com todos os navegadores (ao contrário de frames e de Style Sheets que nem sempre funcionam da mesma forma no Internet Explorer e no Netscape).


Menus de navegação de forma profissional


Os frames proporcionam uma forma excelente de organizar e estruturar o conteúdo de seus documentos.

Este comando permite DIVIDIR a tela em partes (janelas) que podem ser estáticas (contendo menus para a navegação) ou dinâmicas (com as informações que o usuário procura). O uso de frames deixa a página muito mais profissional pois permite criar menus que auxiliam o usuário a navegar pelo site. Outra vantagem é que os frames mantém uma uniformidade em todo o site, dando uma sensação de segurança.

Um cuidado deve ser tomado com o uso de frames, especialmente porque a utilização descuidada ou excessiva pode resultar num design muito apelativo e confuso, dando a impressão de desordem ao site.


A Microsoft dá uma mão para o HTML


As style sheets (folhas de estilo) foram a grande contribuição do Microsoft Internet Explorer 3.0 para o HTML.

Basicamente, uma style sheet funciona como um "template" (modelo) que controla a formatação das tags HTML de uma página, permitindo, por exemplo, definir a fonte e/ou o alinhamento do texto de um parágrafo. Do ponto de vista da criação de documentos HTML as style sheets oferecem vantagens importantes como, a utilização de formatações adicionais e a simplificação do trabalho de manutenção e alteração das páginas.

O único problema é a incompatibilidade entre os browsers.





O segundo ponto que você deve ter em mente para a construção de um site bem organizado é o comando link.

A boa ou má utilização deste comando vai permitir criar sites bem estruturados (e agradáveis) ou de difícil navegação (e confuso).

Este tag permite conduzir o usuário pelas páginas do seu site fazendo-o navegar até encontrar o que precisa. Se as informações estiverem dispostas de forma planejada (e ordenada) este processo será agradável, pois se dará de uma maneira fácil e intuitiva.

Entretanto, se o usuário sentir que esta pulando de uma página para outra sem encontrar o que procura certamente não vai voltar ou sairá do seu site antes mesmo de encontrar o que procura...

Você deve tomar muito cuidado ao planejar seu site para evitar que ele seja uma sucessão de páginas que não contém informação, apenas links. Veja alguns conselhos para uma melhor utilização deste comando:

Use os links com cautela


Existe um ditado que diz: a diferença entre o remédio e o veneno é a DOSE...

O comando link funcionam exatamente da mesma forma. Se você colocar em falta não terá resultados satisfatórios. Se colocar em excesso também não.

Assim, navegue pelo seu site pensando sempre como se você fosse o usuário. Desta forma você poderá encontrar problemas com o excesso ou a falta de links.

Use palavras ou frases importantes nos links


Os links servem para levar o usuário de uma página para outra e devem ser diretos. Assim, use apenas uma ou duas palavras como link e uma frase direta para indicar isso ao usuário. Procure não fazer links desta forma:

Clique aqui para ver os próximos 10 itens

Prefira algo assim:
Clique aqui para ver os próximos 10 itens

Ou assim:
Clique para os próximos 10 itens

Ou ainda (se preferir simplicar bastante):
Próximos 10

Padronize seus links e agrade seus visitantes


Lembre-se de padronizar seus links por todas as páginas do seu site. Isto faz com que seus visitantes se sintam mais confiantes e não terão medo de conhecer mais sobre seu site. Para isto:

- Inclua links de navegação no fim de cada página (voltar, avançar, home, etc)
- Use menus semelhantes em todas as páginas
- Se possível use Tables ou Frames para criar menus mais sofisticados

Disponibilize um serviço de busca em seu site


Nada mais útil para o internauta que ter um serviço de busca no site. Existem vários scripts de busca disponíveis (e muitos deles são gratuítos) e vale a pena incluir um seu site.





A utilização de um conjunto de imagens de qualidade pode beneficiar muito o aspecto de seu site.

Lembre-se que uma imagem vale mais que mil palavras. Entretanto, quando mal utilizada, uma imagem pode apenas servir para acabar com todo seu design.

Lembre-se que o fator mais importante nas imagens é o seu tamanho. Nenhum usuário vai ficar esperando para ver uma imagen de algumas centenas de KB ser carregada... Procure seguir estas orientações:

- Use apenas imagens que REALMENTE são importantes para o conteúdo do site (nada de GIFs animados que são totalmente inúteis)
- Imponha um limite para o número de imagens pesadas (maiores que 15 Kb) em cada página
- Use todos os truques possíveis para reduzir o tamanho dos arquivos .